<div class="content__title">
    <h1>Image Cropper</h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="6">
        <nz-card>
            <h3 class="text-md">Select an image file</h3>
            <button nz-button class="ant-btn__block file-upload mt-sm">
                <input id="file1" accept type="file" (change)="fileChange($event)" />
                <i class="anticon anticon-upload"></i><span>Upload a image</span>
            </button>
            <h3 class="text-md my-md">Crop type</h3>
            <nz-radio-group [(ngModel)]="cropperSettings.rounded">
                <label nz-radio-button [nzValue]="false"><span>Square</span></label>
                <label nz-radio-button [nzValue]="true"><span>Circle</span></label>
            </nz-radio-group>
            <div class="my-md" *ngIf="data1.image">
                <h3 class="text-md">Cropped image</h3>
                <img [class.rounded-circle]="cropperSettings.rounded"
                    [src]="data1.image"
                    [width]="cropperSettings.croppedWidth"
                    [height]="cropperSettings.croppedHeight">
            </div>
        </nz-card>
    </div>
    <div nz-col [nzMd]="18">
        <div nz-row>
            <div nz-col [nzSpan]="24">
                <nz-card>
                    <img-cropper #cropper [image]="data1" [settings]="cropperSettings" (onCrop)="cropped($event)"></img-cropper>
                </nz-card>
            </div>
        </div>
    </div>
</div>
